/* css reset */
*{ margin:0; padding:0;}
ul,ol{ list-style: none;}
img{ display: block;}
a{ text-decoration: none; color: black;}
i {font-style: normal}

/* css common */
.l{float: left;}
.r{float: right;}
.clear:after{ content:""; display: block; clear:both;}
.container {width: 1080px; margin: 0 auto; position: relative;}
.container-fluid {position: relative;}
body {font-size: 14px;background-color: #ffffff;}

/* 详情页主体 */
#detail {
    margin: 10px auto;
}
/* 面包屑 */
.bread {
    margin: 20px 0;
    font-style: 12px;
}
.bread a {
    color: #666666;
}
.bread span {
    color: gray;
}
/* 购买选项编辑 */
/* 商品图 */
.editor .main {
    float: left;
}
/* 大图 */
.editor .goodsPic p {
    width: 460px;
    height: 460px;
    float: left;
    margin-right: 18px;
    border: #ccc 1px solid;
}
.editor .goodsPic p img {
    width: 100%;
    height: 100%;
}
/* 小图 */
.editor .goodsPic ul {
    float: left;
    height: 462px;
}
.editor .goodsPic ul li {
    width: 80px;
    height: 80px;
    margin-bottom: 13px;
    border: solid 1px #ccc;
    cursor: pointer;
}
.editor .goodsPic ul li img {
    width: 100%;
    height: 100%;
}
/* 平台保证 */
.editor .policy {
    margin-top: 20px;
}
.editor .policy li {
    float: left;
    margin-right: 10px;
    cursor: pointer;
    padding-left: 20px;
    background: url(http://static3.biyao.com/pc/common/img/master/policy-icon.png?v=biyao_238b758) left center no-repeat;
    font-size: 12px;
}

/* 选择款式、尺码区域 */
.editor .panel {
    width: 465px;
    float: right;
}
.editor .panel h1 {
    font-size: 20px;
    font-weight: 400;
    color: #333333;
    margin-bottom: 14px;
}
.editor .panel p {
    display: block;
    font-size: 14px;
    color: #999999;
    margin-bottom: 14px;
}

/* 制造商 */
.editor .panel .manufacturer {
    display: inline-block;
    height: 24px;
    padding: 0 10px;
    margin-bottom: 10px;
    border-radius: 2px;
    background-color: #F7F1E8;
    color: #BF9E6B;
    font-size: 12px;
    line-height: 24px;
}
.editor .panel .manufacturer i {
    display: inline-block;
    width: 12px;
    height: 24px;
    vertical-align: text-top;
    line-height: 0;
    background: url(http://static3.biyao.com/pc/www/img/product/icon_manufacturer_location_nomal12.png?v=biyao_c974916) no-repeat 0 1px;
    cursor: pointer;
}

/* 价格条 */
.editor .panel .price {
    margin-top: 15px;
}
.editor .panel .price>span {
    width: 65px;
    font-size: 14px;
    float: left;
    height: 35px;
    line-height: 42px;
    color: #666666;
}
.editor .panel .price div {
    float: right;
    width: 400px;
    height: 35px;
}
.editor .price div span {
    display: inline-block;
    height: 35px;
    font-size: 14px;
}

/* 价格 */
.editor .price div .money {
    color: #f85453;
}
.editor .price div .money i {
    display: inline-block;
    height: 35px;
    vertical-align: -3px;
    font-size: 28px;
}

/* 生产周期 */
.editor .price div .duration {
    margin-left: 40px;
    line-height: 35px;
    vertical-align: 1px;
    color: #666666;
}

// 商品款式
.editor .style {
    margin-top: 15px;
}
.editor .style span {
    float: left;
    width: 65px;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    color: #666666;
}
.editor .style ul {
    width: 400px;
    float: right;
}
.editor .style ul li {
    position: relative;
    display: inline-block;
    margin: 0 6px 15px 0;
    border: 1px solid #ccc;
    cursor: pointer;
}
.editor .style ul li.active {
    border: 1px solid #523669;
}
.editor .style ul li img {
    width: 50px;
    height: 50px;
}
// 选中图标
.editor .style ul li em {
    position: absolute;
    bottom: 0;
    right: 0;
    display: none;
    width: 22px;
    height: 22px;
    background: url(http://static1.biyao.com/pc/common/img/master/specs-active.png?v=biyao_99d793b) no-repeat;
}
.editor .style ul li.active em {
    display: block;
}
// hover时出现的框的上面的三角形
.editor .style ul li i {
    position: absolute;
    top: 48px;
    left: 15px;
    z-index: 3;
    display: none;
    width: 24px;
    height: 10px;
    background: url(http://static2.biyao.com/pc/common/img/master/triangle.png?v=biyao_5912cd0) no-repeat;
    background-size: 100% 100%;
}
// hover时出现的框
.editor .style ul li div {
    position: absolute;
    top: 58px;
    left: -5px;
    width: 60px;
    padding: 0;
    text-align: center;
    line-height: 30px;
    color: #333;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 1px 10px 4px rgba(0,0,0,.05);
    cursor: default;
    z-index: 200;
    display: none;
}
.editor .style ul li {
    &:hover {
        i,div {
            display: block;
        }
    }
}

// 尺码
.editor .specs span{
    float: left;
    width: 65px;
    height: 35px;
    font-size: 14px;
    line-height: 35px;
    color: #666666
}
.editor .specs ul {
    float: left;
    width: 400px;
}
.editor .specs ul li {
    height: 33px;
    line-height: 33px;
    padding: 0 23px;
    font-size: 14px;
    position: relative;
    display: inline-block;
    margin: 0 6px 15px 0;
    border: 1px solid #ccc;
    cursor: pointer;
}
// 选中图标
.editor .specs ul li em {
    position: absolute;
    bottom: 0;
    right: 0;
    display: none;
    width: 22px;
    height: 22px;
    background: url(http://static1.biyao.com/pc/common/img/master/specs-active.png?v=biyao_99d793b) no-repeat;
}
.editor .specs ul li.active em {
    display: block;
}

// 数量
.editor .num {
    span {
        float: left;
        width: 65px;
        height: 35px;
        font-size: 14px;
        line-height: 35px;
        color: #666666
    }
    ul {
        float: left;
        width: 400px;
        input {
            height: 35px;
            padding: 0 23px;
            max-width: 100px;
            outline: none;
            font-size: 16px;
            text-align: center;
            &[type="text"] {
                padding: 0;
                box-sizing: border-box;
            }
            &[type="button"] {
                background-color: #523669;
                color: #ffffff;
                border: 0;
                font-size: 18px;
                cursor: pointer;
            }
        }
    }
}

// 添加至购物车
.editor .addcart {
    width: 180px;
    height: 40px;
    margin: 20px 0;
    margin-left: 65px;
    line-height: 40px;
    background-color: #523669;
    color: #fff;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 18px
}

// 详情图片
.introImg {
    width: 790px;
    margin: 40px auto;
    img {
        width: 100%;
    }
}

// 加入提示
.addSuccess {
    width: 180px;
    height: 90px;
    line-height: 90px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(50%,50%,0);
    background-color: rgba(120, 76, 250,.9);
    font-size: 30px;
    text-align: center;
    color: #ffff;
    border-radius: 10px;
    display: none
}